<template>
  <Modal v-model="visible"
         title="编辑用户"
         @on-cancel="closeModal"
         footer-hide
         :width="620">
    <Form ref="form" :model="form" :rules="rules"
          :label-width="100">
      <FormItem label="工号" prop="userNo">
        <Input v-model="form.userNo" placeholder="请输入工号"></Input>
      </FormItem>
      <FormItem label="姓名" prop="name">
        <Input v-model="form.name" placeholder="请输入姓名"></Input>
      </FormItem>
      <FormItem label="手机号" prop="mobile">
        <Input v-model="form.mobile" placeholder="请输入手机号"></Input>
      </FormItem>
      <FormItem label="角色" prop="roleIds">
        <Select v-model="form.roleIds" multiple
                placeholder="请选择角色">
          <Option v-for="item in roles"
                  :value="item.id"
                  :key="item.id">{{ item.role }} - {{ item.description }}</Option>
        </Select>
      </FormItem>
      <FormItem label="部门" prop="departmentIds">
        <Tree ref="departmentTree" :data="departments"
              show-checkbox multiple check-strictly
              @on-check-change="handleDepartments"></Tree>
      </FormItem>
      <FormItem>
        <Button type="primary" :loading="submitting" @click="submit">提交</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import { roles } from '../../../../apis/system/role';
import { departmentTree } from '../../../../apis/system/department';
import { userDetail, updateUser } from '../../../../apis/system/user';

export default {
  name: 'create',
  data() {
    return {
      visible: false,
      id: '',
      form: {
        userNo: undefined,
        name: undefined,
        mobile: undefined,
        roleIds: [],
        departmentIds: []
      },
      rules: {
        userNo: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { type: 'string', min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' }
        ],
        roleIds: [
          { type: 'array', required: true, message: '请选择角色', trigger: 'change' }
        ],
        departmentIds: [
          { type: 'array', required: true, message: '请选择部门', trigger: 'change' }
        ]
      },
      roles: [],
      departments: [],
      submitting: false
    };
  },
  methods: {
    openModal(id) {
      this.visible = true;
      this.id = id;
      this.initRoles();
      this.initData();
    },
    initRoles() {
      roles({}, (responseData) => {
        this.roles = responseData;
      });
    },
    initData() {
      userDetail(this.id, (responseData) => {
        this.form.userNo = responseData.userNo;
        this.form.name = responseData.name;
        this.form.mobile = responseData.mobile;

        const roleIds = [];
        this.$lodash.forEach(responseData.roles, (item) => {
          roleIds.push(item.id);
        });
        this.form.roleIds = roleIds;

        const departmentIds = [];
        this.$lodash.forEach(responseData.departments, (item) => {
          departmentIds.push(item.id);
        });
        this.form.departmentIds = departmentIds;

        this.initDepartments();
      }, () => {
        this.initDepartments();
      });
    },
    initDepartments() {
      departmentTree(undefined, (responseData) => {
        this.departments = this.getDepartments(responseData);
      });
    },
    getDepartments(departments) {
      const departmentTree = [];
      this.$lodash.forEach(departments, (item) => {
        const menu = {
          id: item.id,
          title: item.name,
          expand: true,
          checked: this.$lodash.includes(this.form.departmentIds, item.id)
        };
        if (item.children && item.children.length > 0) {
          menu.children = this.getDepartments(item.children);
        }
        departmentTree.push(menu);
      });
      return departmentTree;
    },
    handleDepartments(departments) {
      const departmentIds = [];
      this.$lodash.forEach(departments, (item) => {
        departmentIds.push(item.id);
      });
      this.form.departmentIds = departmentIds;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitting = true;

          updateUser(this.id, {
            userNo: this.form.userNo,
            name: this.form.name,
            mobile: this.form.mobile,
            roleIds: this.form.roleIds,
            departmentIds: this.form.departmentIds
          }, () => {
            this.submitting = false;

            this.$Message.success('保存成功');
            this.closeModal();
            this.$refs.form.resetFields();
            this.$emit('success');
          }, () => {
            this.submitting = false;
          });
        }
      });
    },
    closeModal() {
      this.visible = false;
    }
  }
};
</script>

<style scoped lang="less">
  .ivu-form-item /deep/ .ivu-tree {
    ul {
      li {
        margin: 0;
      }
    }
  }
</style>
